<!--
 * @Author: Allen
 * @Date: 2021-01-12 10:01:52
 * @Description: 抱怨身处黑暗，不如提灯前行。愿你在自己存在的地方，成为一束光，照亮世界的一角
 * @LastEditTime: 2021-01-13 09:38:38
 * @LastEditors: Allen
 * @FilePath: \WMS\src\views\WMS\inStorageManage\ArrivalNoteQuery\print.vue
 * @Additional: 附加类容
-->

<template>
  <div class="print" :style="opened ? 'left:210px;top:70px' : 'left:70px;top:70px'">
    <div class="title">
      <div>打印</div>
      <i class="el-icon-close" style="cursor: pointer" @click="colse"></i>
    </div>
    <div class="content">
      <div id="printMe" class="printMe" ref="print">
        <div
          style="page-break-after:always;"
          v-for="(item, index) in data"
          :key="item.ARRIVAL_CODE"
          class="ll"
        >
          <div class="printBox" style="border-top: 1px solid black;">
            <div class="printTitle">
              <div class="alert">到货提示</div>
              <div class="tips">采购入库</div>
            </div>
            <div class="content">
              <div class="leftContent">
                <div class="c-name1">{{ item.ARRIVAL_CODE }}</div>
                <div class="c-name2">{{ item.AREA_CODE }}</div>
              </div>
              <div class="rightContent">
                <div class="qrcode" :id="'qrcode' + index"></div>
              </div>
            </div>
            <div class="printFooter">
              <div>{{ item.SUPPLIER_CODE }}</div>
              <div>{{ item.PARTNER_FULL_NAME }}</div>
            </div>
            <div class="dataTiem">{{ item.DELIVERY_TIME }}</div>
          </div>
          <div class="printBox1" style="border-top: 1px solid black;">
            <div class="printTitle">
              <div class="alert">到货提示</div>
              <div class="tips">采购入库</div>
            </div>
            <div class="content">
              <div class="leftContent">
                <div class="c-name1">{{ item.ARRIVAL_CODE }}</div>
                <div class="c-name2">{{ item.AREA_CODE }}</div>
              </div>
              <div class="rightContent">
                <div class="qrcode" :id="'qrcode2' + index"></div>
              </div>
            </div>
            <div class="printFooter">
              <div>{{ item.SUPPLIER_CODE }}</div>
              <div>{{ item.PARTNER_FULL_NAME }}</div>
            </div>
            <div class="dataTiem">{{ item.DELIVERY_TIME }}</div>
          </div>
          <div class="footer">第{{ index + 1 }}页</div>
        </div>
      </div>
      <el-button size="medium" type="primary" class="printBtn" @click="print">打印</el-button>
    </div>
  </div>
</template>

<script>
import JsBarcode from "jsbarcode";
import QRCode from "qrcodejs2";
import request from "@/utils/request";
export default {
  name: "print",
  data() {
    return {
      // opened:this.$store.getters.sidebar.opened
      data: []
    };
  },
  computed: {
    opened() {
      return this.$store.getters.sidebar.opened;
    }
  },
  props: {
    printCode: {
      type: String,
      default: ""
    }
  },
  methods: {
    creatQrCode() {
      this.data.map((item, index) => {
        var qrcode = new QRCode("qrcode" + index, {
          text: item.ARRIVAL_CODE, // 需要转换为二维码的内容
          width: 150,
          height: 150,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      });
      this.data.map((item, index) => {
        var qrcode = new QRCode("qrcode2" + index, {
          text: item.ARRIVAL_CODE, // 需要转换为二维码的内容
          width: 150,
          height: 150,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      });
    },
    print() {
      this.$printJs.printByEle(this.$refs.print);
      this.$printJs.getStyle(this.$refs.print);
    },
    colse() {
      this.$emit("colse");
    },
    queryData() {
      request({
        url: "/mp/wm/vl/warehouse/arrival/queryprint.do",
        method: "post",
        data: {
          ARRIVAL_CODE: this.printCode
        }
      }).then(res => {
        this.data = res.listRow;
        setTimeout(res => {
          this.creatQrCode();
        }, 100);
      });
    }
  },
  async mounted() {
    this.queryData();
  }
};
</script>

<style lang="scss" scoped>
.qrcode {
  display: inline-block;
  img {
    width: 132px;
    height: 132px;
    background-color: #fff; //设置白色背景色
    padding: 6px; // 利用padding的特性，挤出白边
    box-sizing: border-box;
  }
}
.printMe {
  width: 100%;
}
.print {
  position: fixed;
  top: 43px;
  right: 0;
  bottom: 0;
  background: rgba($color: #ffffff, $alpha: 1);
  transition: all 0.28s;
  overflow: auto;
  z-index: 999999;
  .title {
    width: 100%;
    height: 60px;
    background: #4476a7;
    line-height: 60px;
    color: white;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
  }
  .ll {
    padding: 0px 120px;
    font-size: 16px;
    .name {
      font-size: 20px;
    }
  }
  .footer {
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px dashed #000;
    margin-top: 30px;
  }
}
.printBtn {
  position: fixed;
  top: 120px;
  right: 50px;
  z-index: 99999999;
  line-height: 35px;
  height: 35px;
}

.printTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .alert {
    font-size: 20px;
    font-weight: 600;
  }
  .tips {
    font-size: 18px;
  }
}

.content {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .leftContent {
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 38px;
    font-weight: 600;
  }
}

.dataTiem {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.printFooter {
  margin-top: 10px;
  display: flex;
  align-items: center;
  font-size: 24px;
}
@media print {
  .printMe {
    padding: 0 100px;
  }
  .ll {
    font-size: 18px;
    .name {
      font-size: 28px;
    }
  }
  .footer {
    display: none;
  }
  .printBox {
    padding: 140px 0;
  }
  .printBox1 {
    padding-top: 140px;
  }
}
</style>
